<template>
    <view class="address-page">
        <!-- 地址列表 -->
        <view class="address-list" v-if="addressList.length > 0">
            <view 
                class="address-card" 
                v-for="(item, index) in addressList" 
                :key="index"
                :class="{'default-address': item.defaultStatus}"
                @tap="selectAddr(item)">
                <view class="address-card-content">
                    <view class="address-header">
                        <view class="address-name-section">
                            <text class="address-name">{{ item.name }}</text>
                            <text class="address-phone">{{ item.mobile }}</text>
                        </view>
                        <view class="address-actions" @tap.stop="editAddr(item)">
                            <tui-icon name="edit" color="#999" :size="18"></tui-icon>
                        </view>
                    </view>
                    <view class="address-body">
                        <view class="address-tags" v-if="item.defaultStatus">
                            <view class="default-tag">默认</view>
                        </view>
                        <view class="address-text">{{ item.areaName }} {{ item.detailAddress }}</view>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 空状态 -->
        <view class="empty-state" v-else>
            <view class="empty-icon">📍</view>
            <view class="empty-text">暂无收货地址</view>
            <view class="empty-desc">点击下方按钮添加收货地址</view>
        </view>
        
        <!-- 新增地址按钮 -->
        <view class="address-footer">
            <view class="footer-safe-area">
                <tui-button 
                    shadow 
                    shape="circle" 
                    type="danger" 
                    height="88rpx" 
                    @click="editAddr"
                    class="add-address-btn">
                    <view class="btn-content">
                        <text class="btn-icon">+</text>
                        <text class="btn-text">新增收货地址</text>
                    </view>
                </tui-button>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                addressList: [],
                ssqList: [],
                items: []
            };
        },
        onLoad(options) {
            if (options.items) {
                this.items = JSON.parse(options.items);
            } else {
                this.items = [];
            }
        },
        onShow() {
            this.loadAddressList();
            this.loadSsqList()
        },
        methods: {
            selectAddr(item) {
                // 如果 items 为空，说明是从地址管理页面进入的，不跳转到提交订单页面
                if (!this.items || this.items.length === 0) {
                    // 从地址管理页面进入，点击地址可以编辑
                    this.editAddr(item);
                    return;
                }
                // 从提交订单页面进入，选择地址后跳转到提交订单页面
                uni.navigateTo({
                    url: `../submitOrder/submitOrder?id=${item.id}&items=${JSON.stringify(this.items)}`
                });
            },
            loadSsqList() {
                this.$api.req("/system/area/tree",{},"get","JSON",false).then((res) => {
                    if (res.code === 0) {
                        this.ssqList = res.data
                    }
                });
            },
            loadAddressList() {
                // 更新：请求数据后将其映射到页面显示需要的格式
                this.$api.req("/member/address/list",{},"get","JSON",false).then((res) => {
                    if (res.code === 0) {
                        this.addressList = res.data.map(item => ({
                            name: item.name,
                            mobile: item.mobile,
                            areaName: item.areaName,
                            detailAddress: item.detailAddress,
                            defaultStatus: item.defaultStatus,
                            id: item.id
                        }));
                    }
                });
            },
            editAddr(item) {
                // 判断是否传递了参数
                if (item && item.id) {
                    // 编辑地址
                    uni.navigateTo({
                        url: `../editAddress/editAddress?id=${item.id}`
                    });
                } else {
                    // 新增地址
                    uni.navigateTo({
                        url: `../editAddress/editAddress?id=0`
                    });
                }
            }
        }
    };
</script>

<style>
    .address-page {
        min-height: 100vh;
        background: #f5f5f5;
        padding-bottom: 180rpx;
    }

    /* 地址列表 */
    .address-list {
        padding: 20rpx 30rpx;
    }

    .address-card {
        background: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .address-card:active {
        transform: scale(0.98);
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    }

    .address-card.default-address {
        border: 2rpx solid #E41F19;
        background: linear-gradient(135deg, #fff 0%, #fff5f5 100%);
    }

    .address-card-content {
        padding: 30rpx;
    }

    .address-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #f0f0f0;
    }

    .address-name-section {
        display: flex;
        align-items: center;
        gap: 20rpx;
        flex: 1;
    }

    .address-name {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
    }

    .address-phone {
        font-size: 28rpx;
        color: #666;
    }

    .address-actions {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #f8f8f8;
        transition: all 0.3s ease;
    }

    .address-actions:active {
        background: #f0f0f0;
        transform: scale(0.95);
    }

    .address-body {
        display: flex;
        flex-direction: column;
        gap: 12rpx;
    }

    .address-tags {
        display: flex;
        gap: 10rpx;
    }

    .default-tag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6rpx 16rpx;
        background: linear-gradient(135deg, #E41F19, #ff4757);
        color: #fff;
        font-size: 22rpx;
        border-radius: 20rpx;
        font-weight: 500;
        box-shadow: 0 2rpx 8rpx rgba(228, 31, 25, 0.3);
    }

    .address-text {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
        word-break: break-all;
    }

    /* 空状态 */
    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 200rpx 60rpx;
        text-align: center;
    }

    .empty-icon {
        font-size: 120rpx;
        margin-bottom: 30rpx;
        opacity: 0.3;
    }

    .empty-text {
        font-size: 32rpx;
        color: #999;
        font-weight: 500;
        margin-bottom: 15rpx;
    }

    .empty-desc {
        font-size: 26rpx;
        color: #bbb;
    }

    /* 底部按钮 */
    .address-footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        background: #fff;
        padding: 20rpx 30rpx;
        box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.08);
    }

    .footer-safe-area {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .add-address-btn {
        width: 100%;
    }

    .btn-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10rpx;
    }

    .btn-icon {
        font-size: 36rpx;
        font-weight: 300;
        line-height: 1;
    }

    .btn-text {
        font-size: 30rpx;
        font-weight: 500;
    }
</style>